<template>
  <!-- 表单 -->
  <el-form label-width="120px">
    <el-form-item label="姓名">
      <el-input
        v-model="formData.username"
        style="width: 50%"
        placeholder="请输入姓名"
      />
    </el-form-item>
    <el-form-item label="手机">
      <el-input
        v-model="formData.mobile"
        style="width: 50%"
        placeholder="请输入手机号"
      />
    </el-form-item>
    <el-form-item label="入职时间">
      <el-date-picker
        v-model="formData.timeOfEntry"
        style="width: 50%"
        placeholder="请选择入职时间"
      />
    </el-form-item>
    <el-form-item label="聘用形式">
      <el-select
        v-model="formData.formOfEmployment"
        style="width: 50%"
        placeholder="请选择"
      >
        <el-option label="正式" :value="1" />
        <el-option label="非正式" :value="0" />
      </el-select>
    </el-form-item>
    <el-form-item label="工号">
      <el-input
        v-model="formData.workNumber"
        style="width: 50%"
        placeholder="请输入工号"
      />
    </el-form-item>
    <el-form-item label="部门">
      <el-input
        v-model="formData.departmentName"
        style="width: 50%"
        placeholder="请选择部门"
        @focus="handleTree"
      />
      <div v-if="showTree" style="height: 200px; overflow: auto">
        <el-tree
          default-expand-all
          :props="defaultProps"
          :data="tableData"
          @node-click="handleNodeClick"
        />
      </div>
    </el-form-item>
    <el-form-item label="转正时间">
      <el-date-picker
        v-model="formData.correctionTime"
        style="width: 50%"
        placeholder="请选择转正时间"
      />
    </el-form-item>
    <el-form-item>
      <el-button @click="cancle">取消</el-button>
      <el-button type="primary" @click="submitHandle">确定</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
import { getDepart } from '@/api/department'
import { toDo, toDo2 } from '@/utils/'
import { addEmployee } from '@/api/employees'
export default {
  name: '',
  props: {
    dialogVisible: {
      type: Boolean
    }
  },
  data() {
    return {
      tableData: [],
      formData: {
        username: '', // 用户名
        mobile: '', // 手机号
        formOfEmployment: '', // 聘用形式
        workNumber: '', // 工号
        departmentName: '', // 部门
        timeOfEntry: '', // 入职时间
        correctionTime: '' // 转正时间
      },
      showTree: false,

      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  computed: {},
  created() {
    this.getData()
  },
  methods: {
    getData() {
      getDepart().then((res) => {
        // console.log(res)
        // this.tableData = toDo(res.data.depts)
        this.tableData = toDo2(res.data.depts)
      })
    },
    handleTree() {
      this.showTree = true
    },
    handleNodeClick(data) {
      console.log(data, 777)
      if (data.name) {
        // 关闭对话框
        this.showTree = false
      }
      this.formData.departmentName = data.name
    },
    cancle() {
      this.$emit('update:dialogVisible', false)
    },
    async submitHandle() {
      // 点击确认按钮
      // console.log(this.formData)
      const res = await addEmployee(this.formData)
      this.success()
    },
    success() {
      // 子传父
      this.$emit('success')
    }
  }
}
</script>
<style lang="less" scoped></style>
